<template>
	<view class="emailpage">
		<view class="telinp">
			<view class="inptop">
				<view class="inptoptext">
					电子邮箱:
				</view>
				<uni-easyinput class="inpp" trim="all" v-model="useremail" placeholder="手机号码,电子邮箱或用户名" ></uni-easyinput>
				<!-- <button type="success"   @tap="sendcode"></button> -->
				<!-- <uni-fav :checked="false"  content-text="发送" @click="sendcode" /> -->
				<uni-fav bgColorChecked="#dd524d" bgColor="#3e7ff7" fgColor="#ffffff" :checked="isokclick" circle="true" :star="false" :content-text="contentText" @click="sendcode"/>
			</view>
			<myline></myline>
			<view class="inptop">
				<view class="inptoptext">
					验证码:
				</view>
				<uni-easyinput class="inpp" trim="all" v-model="usercode" placeholder="验证码" ></uni-easyinput>
			</view>
			<myline></myline>
			
			<view class="inptop">
				<view class="inptoptext">
					密码:
				</view>
				<uni-easyinput type="password" v-model="userpassword" placeholder="6-16位字符" class="inpp"></uni-easyinput>
			</view>
			<myline></myline>
			<view class="inptop">
				<view class="inptoptext">
					确认密码:
				</view>
				
				<uni-easyinput type="password" v-model="reuserpassword" placeholder="6-16位字符" class="inpp"></uni-easyinput>
			</view>
			<myline></myline>
		</view>
		<view class="logtop">
		
			<view class="telbot">
				<view class="rollback" @tap="goback">
					后退
				</view>
				<view class="contel" @tap="submitemail">
					下一步
				</view>
		
			</view>
			<view class="tipc">
				温馨提示,可以选择免密码登录,方便登录
			</view>
		</view>
	</view>
</template>

<script>
	import myline from '@/components/common/Lines.vue'
	import $http from '@/common/api/request.js'
	import {mapMutations} from 'vuex'
	export default {
		data() {
			return {
				useremail:"",
				usercode:"",
				userpassword:"",
				isokclick:false,//状态
				contentText: {
					contentDefault: '发送',
					contentFav: '等待'
				},
				reuserpassword:"",
				rules: {
					useremail:{
						msg:"邮箱格式不合法",
						rule:/^[^\s@]+@[^\s@]+\.[^\s@]+$/
					},
					userpassword:{
						msg:"密码长度应为6-16",
						rule:/^(?=.*[a-zA-Z0-9]).{6,16}$/
					},
					reuserpassword:{
						msg:"确认密码长度应为6-16",
						rule:/^(?=.*[a-zA-Z0-9]).{6,16}$/
					},
					usercode:{
						msg:"验证码不符合",
						rule:/^.{4,4}$/
					}
				}
			};
		},
		components: {
			myline
		},
		onLoad(e) {
			
		},
		onReady() {
			
		},
		methods: {
			...mapMutations(['login']),
			//校验规则:
			validate(key) {
				let bool = true;
				if (!this.rules[key].rule.test(this[key])) {
					uni.showToast({
						title: this.rules[key].msg,
						icon: "none"
					})
					bool = false;
					return bool;
				}
				return bool;
			},
			sendcode(){
				this.isokclick = !this.isokclick;
				this.$forceUpdate();
				
				uni.showToast({
					title:`已经向${this.useremail}发送验证码`,
					icon:"none",
					duration:500,
					mask:true
				})
				setTimeout(()=>{
					$http.request({
						url: "/sendcode",
						method: "POST",
						data: {
							credentials: this.useremail,
						}
					}).then((res)=>{
						
						if(res.code === 200){
							uni.showToast({
								title:res.msg,
								icon:"none"
							})
						}else{
							uni.showToast({
								title:res.msg,
								icon:"none",
								duration:2500,
								mask:true
							})
						}
					}).catch((err)=>{
						console.log(err);
					})
				},1500)
				
			},
			submitemail(){
				if(!this.validate('useremail')) return;
				if(!this.validate('usercode')) return;
				if(! this.validate('userpassword') && this.validate('reuserpassword')) return;
				
				if(this.userpassword == this.reuserpassword){
					$http.request({
						url: "/credentials",
						method: "POST",
						data: {
							credentials: this.useremail,
							usercode:this.usercode,
							userpassword:this.userpassword
						}
					}).then((res)=>{
						
						if(res.code == 200){
							uni.showToast({
								title:res.msg,
								icon:"none",
								duration:1500,
								mask:true
							})
							this.$nextTick(()=>{
								uni.navigateTo({
									url:`/pages/logn/logn?currentindex=1&username=${res.data.userName}`
								})
							})
						}else{
							uni.showToast({
								title:res.msg,
								icon:"none",
								duration:2500,
								mask:true
							})
						}
						
					}).catch((err)=>{
						console.log(err);
					})
					
					
				}else{
					uni.showToast({
						title:"密码不一致错误",
						icon:"none",
						duration:2000
					})
				}
				
				
				
				
			},
			goback(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style lang="scss">
	.emailpage{
		background: rgba(0, 0, 0, 0.1) url('/static/img/login/117338468_p1_master1200.jpg') no-repeat;
		background-size: 100% auto;
		height: 100vh;
	}
	.telinp {
		font-size: 30rpx;
		position: relative;
		top:20%;
		left:0;
		color: $uni-text-color-inverse;
		.inptop {
			display: flex;
			font-size: $uni-font-size-lg;
			align-items: center;
			background-color: rgba(0, 0, 0, .6);
			.inptoptext{
				
				width: 25%;
				padding: 10rpx;
				
			}
			.inpp {
				width: 70%;
				padding: 10rpx;
			}
		}
	
		.inpbot {
			padding: 10rpx 20rpx;
			display: flex;
			justify-content: space-between;
			font-size: 26rpx;
			
		}
	}
	.logtop {
		position: relative;
		top:30%;
		left:0;
		.telbot {
			display: flex;
			justify-content: space-around;
			.rollback{
				padding: 25rpx;
				width: 30%;
				border: 1rpx solid #282c35;
				font-size: $uni-font-size-lg;
				text-align: center;
				color: $uni-text-color-inverse;
				background-color: #185abd;
				border-radius: 20rpx;
			}
			.contel {
				padding: 20rpx;
				width: 30%;
				border: 1rpx solid #282c35;
				border-radius: 20rpx;
				font-size: $uni-font-size-lg;
				text-align: center;
				background-color: #e33c2f;
				color: $uni-text-color-inverse;
			}
		}
		.tipc {
			margin-top: 10rpx;
			text-align: center;
			font-size: $uni-font-size-lg;
			color: $uni-text-color-placeholder;
		}
	}
</style>

